<style lang="scss">
	.classify {
		display: flex;
		height: 100vh;
		
		.left {
			width: 160rpx;
			// background-color: red;
			overflow: auto;
			border-right: 1px solid #ccc;

			.left-title {
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				&.active {
					color: red;
					border-left: 4px solid red;
				}
			}
			
		}

		.right {
			flex: 1;
			// background-color: green;
			overflow: auto;
		}


		.list {
			.list-item {
				display: flex;
				border: 1px solid #ccc;
				padding: 10rpx;

				image {
					width: 240rpx;
					height: 160rpx;
					flex-shrink: 0;

				}
			}
		}
	}
</style>

<template>
	<view class="classify">
		<view class="left">
			<view class="left-title" @click="activeIndex = index" :class="activeIndex === index ? 'active': ''" v-for="(item, index) in tabList" :key="item.id">{{ item.title }}</view>
		</view>
		<view class="right">
			<view class="list" v-if="tabList.length > 0">
				<view class="list-item" v-for="item in tabList[activeIndex].children" :key="item.id">
					<image :src="item.image" mode=""></image>
					<view class="right">
						<view class="title">{{ item.title }}</view>
						<view class="desc">{{ item.desc }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const tabList = ref([])
	// 高亮下表
	const activeIndex = ref(0)
	const getData = () => {
		uni.request({
			url: 'http://localhost:3000/tab'
		}).then(resp => {
			console.log(resp.data)
			tabList.value = resp.data
		})
	}

	getData()
</script>